<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title>中文网</title>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <link href="css/homepage.css" rel="stylesheet" type="text/css">
  <link href="css/devices.css" rel="stylesheet" type="text/css">
  <link href="img/favicon.png" rel="icon" type="image/png">

</head>

<body>
  <header class="header" role="banner">
    <div class="container-lrg">
      <div class="col-12 spread aligncenter">
        <a class="logo mobile-hide">
          <!--<img class="logo-img" src="img/XXX-white-text.svg" alt="XXX">-->
          	JasonTaylor
        </a>
        <nav class="nav mobile-col-12 spread" role="navigation">
          <!--<a class="nav-link" href="">入门指南</a>
          <a class="nav-link" href="">API文档</a>
          <a class="nav-link" href="">旧版文档</a>
          <a class="nav-link" href="" target="_blank">插件</a>
          <a class="nav-link" href="" target="_blank">Twitter</a>
          <a class="nav-link" href="" target="_blank">博客</a>
          <a class="nav-link" href="" target="_blank">英文官网</a>-->
          <a class="nav-link" href="" target="_blank">英文官网</a>
        </nav>
      </div>
    </div>

    <div class="container-lrg">
      <div class="col-12">
        <img class="hidden" src="img/XXX.jpg" width="800">
        <h1 class="heading text-center">用自动化构建工具增强你的工作流程！</h1>
      </div>
    </div>

    <div class="container-lrg">
      <div class="centerdevices col-12">
        <div class="computerwrapper">
          <div class="computer">
            <div class="mask">
              <div class="editor-window logo-cli">
                <pre><code>
<span class="editor-prefixed">npm install XXX -save -d</span>
<span class="editor-prefixed">XXX --version</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-sml">
      <div class="col-12 text-center">
        <h2 class="paragraph">
          将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
        </h2>
        <div class="ctas">
          <a class="ctas-button" href="">入门指南</a>
        </div>
      </div>
    </div>
  </header>

  <main class="feature3" role="main">
    <div class="container-lrg flex baseline">
      <div class="col-4">
        <b class="svg center"><img class="mask-img" src="img/browser.svg" alt=""></b>
        <h3 class="subheading center">简单</h3>
        <p class="paragraph">
          代码优于配置、node 最佳实践、精简的 API 集，XXX 让工作前所未有的简单。
        </p>
      </div>
      <div class="col-4">
        <b class="svg center"><img class="mask-img" src="img/guage.svg" alt=""></b>
        <h3 class="subheading center">高效</h3>
        <p class="paragraph">
          基于 node 强大的流(stream)能力，XXX 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
        </p>
      </div>
      <div class="col-4">
        <b class="svg center"><img class="mask-img" src="img/atom.svg" alt=""></b>
        <h3 class="subheading center">生态</h3>
        <p class="paragraph">
          遵循严格的准则，确保我们的插件结构简单、运行结果可控。
        </p>
      </div>
    </div>
    <div class="border-container">
      <div class="col-3 border"></div>
    </div>
    <div class="container-lrg flex baseline">
      <div class="col-3 mobile-col-6 text-center">
        <h3 id="installs" class="subheading">100,000</h3>
        <p class="paragraph">
          本周安装量
        </p>
      </div>
      <div class="col-3 mobile-col-6 text-center">
        <h3 id="XXX-plugins" class="subheading">1,000</h3>
        <p class="paragraph">
          XXX 插件数量
        </p>
      </div>
      <div class="col-3 mobile-col-6 text-center">
        <h3 class="subheading">1,000+</h3>
        <p class="paragraph">
          企业用户数
        </p>
      </div>
      <div class="col-3 mobile-col-6 text-center">
        <h3 class="subheading">
          ∞
        </h3>
        <p class="paragraph">
          节省的时间
        </p>
      </div>
    </div>
  </main>

  <div class="whatisXXX">
    <div class="container-lrg">
      <div class="col-12">
        <div class="editor-window">
          <div class="editor-menubar">
            <span class="editor-button close"></span>
            <span class="editor-button minimize"></span>
            <span class="editor-button maximize"></span>
            <span class="editor-filename">XXXfile.js</span>
          </div>
          <pre><code class="javascript hljs">
<span class="hljs-keyword">const</span> { <span class="mobile-show"><br />  </span>src, <span class="mobile-show"><br />  </span>dest, <span class="mobile-show"><br />  </span>parallel <span class="mobile-show"><br /></span>} = <span class="hljs-built_in">require</span>(<span class="hljs-string">'XXX'</span>);
<span class="hljs-keyword">const</span> pug = <span class="mobile-show"><br />  </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'XXX-pug'</span>);
<span class="hljs-keyword">const</span> less = <span class="mobile-show"><br />  </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'XXX-less'</span>);
<span class="hljs-keyword">const</span> minifyCSS = <span class="mobile-show"><br />  </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'XXX-csso'</span>);
<span class="hljs-keyword">const</span> concat = <span class="mobile-show"><br />  </span><span class="hljs-built_in">require</span>(<span class="hljs-string">'XXX-concat'</span>);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">html</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">return</span> src(<span class="mobile-show"><br />      </span><span class="hljs-string">'client/templates/*.pug'</span><span class="mobile-show"><br />    </span>)
    .pipe(pug())
    .pipe(dest(<span class="hljs-string">'build/html'</span>))
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">css</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">return</span> src(<span class="mobile-show"><br />      </span><span class="hljs-string">'client/templates/*.less'</span><span class="mobile-show"><br />    </span>)
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest(<span class="hljs-string">'build/css'</span>))
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">js</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-keyword">return</span> src(<span class="mobile-show"><br />      </span><span class="hljs-string">'client/javascript/*.js'</span>,<span class="mobile-show"><br />     </span> { sourcemaps: true }<span class="mobile-show"><br />    </span>)
    .pipe(concat(<span class="hljs-string">'app.min.js'</span>))
    .pipe(dest(<span class="mobile-show"><br />      </span><span class="hljs-string">'build/js'</span>,<span class="mobile-show"><br />     </span> { sourcemaps: true }<span class="mobile-show"><br />    </span>))
}

exports.<span class="hljs-keyword">js</span> = js;
exports.<span class="hljs-keyword">css</span> = css;
exports.<span class="hljs-keyword">html</span> = html;
exports.<span class="hljs-keyword">default</span> = <span class="mobile-show"><br />  </span>parallel(html, css, js);
          </code></pre>
        </div>
      </div>
    </div>
  </div>

  <div class="socialproof">
    <div class="container-sml">
      <div class="flex text-center">
        <div class="col-12">
          <h4 class="subheading">
            "Builds can be the most awful sinkhole for teams to waste their time with - XXX is a serious win for any
            project."
          </h4>
          <p class="paragraph">Eric, Co-founder @ stae</p>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="container-lrg flex">
      <div class="col-6 text-center">
        <div class="contribute-copy center vertical text-center">
          <h3 class="subheading">Become a backer</h3>
          <p class="paragraph">
            Support the community and keep development going strong.
          </p>
          <a class="ctas-button" href="">Donate</a>
        </div>
      </div>
      <div class="col-6 text-center">
        <h3 class="subheading">Top Sponsors</h3>
        
      </div>
    </div>
    <div class="container-lrg flex">
      <div class="col-12 text-center">
        <ul class="site-links flex center">
            <li><a href="" target="_blank">Bootstrap中文网</a>
            </li>
            <li><a href="" target="_blank">Nodejs中文文档</a>
            </li>


           
        </ul>
        <p class="icp"><a href="https://beian.miit.gov.cn" target="_blank">京ICP备18063543号</a></p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@6.0.2/promise.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
  <script async src="js/script.js"></script>
</body>

</html>
